<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS Border Test:border image repeat property with value stretch</title>
    <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
    <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
    <style type="text/css">
            div {
                width: 152px;
                height: 152px;
                position: relative;
            }
            .red {
                width: 26px;
                height: 26px;
                position: absolute;
            }
            #red1 {
                top: 0;
                left: 0;
            }
            #red2 {
                top: 0;
                right: 0;
            }
            #red3 {
                bottom: 0;
                right: 0;
            }
            #red4 {
                bottom: 0;
                left: 0;
            }
            .blue {
                position: absolute;
            }
            #blue1 {
                top: 0;
                left: 26px;
                width: 100px;
                height: 26px;
            }
            #blue2 {
                top: 26px;
                right: 0;
                width: 26px;
                height: 100px;
            }
            #blue3 {
                bottom: 0;
                right: 26px;
                width: 100px;
                height: 26px;
            }
            #blue4 {
                bottom: 26px;
                left: 0;
                width: 26px;
                height: 100px;
            }
    </style>
  </head>
  <body>
    <p>
      The test passes if the blue diamond is stretching between the red diamonds.
    </p>
    <div>
      <img src="../support/red-diamond.png" alt="left top red diamond" class="red" id="red1"/>
      <img src="../support/red-diamond.png" alt="right top red diamond" class="red" id="red2" />
      <img src="../support/red-diamond.png" alt="right bottom red diamond" class="red" id="red3" />
      <img src="../support/red-diamond.png" alt="left bottom red diamond" class="red" id="red4" />
      <img src="../support/blue-diamond.png" alt="top blue diamond" class="blue" id="blue1"/>
      <img src="../support/blue-diamond.png" alt="right blue diamond" class="blue" id="blue2" />
      <img src="../support/blue-diamond.png" alt="bottom blue diamond" class="blue" id="blue3" />
      <img src="../support/blue-diamond.png" alt="left blue diamond" class="blue" id="blue4" />
    </div>
  </body>
</html>
